﻿<template id="@(ViewBag.PageTemplate)">
    <div class="layout-page-dialog-content">
        <el-form ref="formRef" :rules="rules" :disabled="disabled" :model="record" :hide-required-asterisk="disabled" label-width="auto" label-suffix=" :">
            <el-alert v-if="showExpireInfo" class="layout-page-form-top-border" type="warning" show-icon
                      title="您的账号密码已经过期，请修改密码后重新登录" :closable="false"></el-alert>
            <el-form-item label="用户名" prop="username">
                <el-input :disabled="true" v-model="record.username"></el-input>
            </el-form-item>
            <el-form-item label="旧密码" prop="oldPwd">
                <el-input v-model="record.oldPwd" type="password" show-password></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPwd">
                <el-input v-model="record.newPwd" type="password" show-password></el-input>
            </el-form-item>
            <el-form-item label="密码确认" prop="confirmPwd">
                <el-input v-model="record.confirmPwd" type="password" show-password></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>
<script type="text/javascript">
    var @(ViewBag.PageName) = {
        template: "#@(ViewBag.PageTemplate)", data() {
            return {
                path: "@(ViewBag.PagePath)",
                pwdFormat: "@(ViewBag.PwdFormat)",
                pwdIsExpire: "@(ViewBag.PwdIsExpire)",
                rules: {
                    oldPwd: [{ required: true, message: "请填写旧密码" }],
                    newPwd: [{
                        validator: (rule, value, callback) => {
                            var format = this.pwdFormat || "简单";
                            if (!value) {
                                return callback(new Error('请填写新密码'));
                            }
                            if (format == "简单" || format == "复杂") {
                                if (value.length < 8 || value.length > 20) {
                                    return callback(new Error('密码长度必须在8到20位之间'));
                                }
                            }
                            if (format == "复杂") {
                                if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_!@@#$%^&*`~()-+=]).+$/.test(value)) {
                                    return callback(new Error('密码必须包含大小写字母、数字、特殊字符'));
                                }
                            }
                            callback();
                        }, required: true
                    }],
                    confirmPwd: [{
                        validator: (rule, value, callback) => {
                            if (!value) {
                                return callback(new Error('请填写密码确认'));
                            }
                            if (value != this.record.newPwd) {
                                return callback(new Error('两次密码填写不一致'));
                            }
                            callback();
                        }, required: true
                    }]
                },
                record: {
                    id: "@(ViewBag.UserId)",
                    username: "@(ViewBag.UserName)",
                    oldPwd: "",
                    newPwd: "",
                    confirmPwd: ""
                },
                disabled: false,
                showExpireInfo: false,
                dialog: app.that.$refs.layout_page_dialog_ref
            }
        },
        methods: {
            init(){
                var that = this;
                // 判定密码是否过期
                if (that.pwdIsExpire && that.pwdIsExpire == "True") {
                    that.showExpireInfo = true;
                    that.dialog.allowClose = false;
                }
                // 初始化弹框确定按钮
                that.dialog.submit = () => {
                    that.$refs.formRef.validate(valid => {
                        if (valid) {
                            app.func.submit(`${that.path}/changepwdsave`, that.record, that.changeSuccess);
                        }
                    });
                };
                // 初始化弹框宽度
                that.dialog.width = 500;
            },
            changeSuccess(){
                var that = this;
                if (that.showExpireInfo) {
                    app.func.success("密码修改成功，请重新登录").then(that.logout).catch(that.logout);
                }
                that.dialog.close();
            },
            logout(){
                location.replace("/work/home/logout");
            }
        },
        mounted() { this.init(); }
    };
</script>